<script setup>
defineProps({
  searchOnFocus: {
    type: Boolean,
    default: false,
  },
})
defineEmits(['update:searchOnFocus'])
const searchValue = ref('')
function searchTo() {
  console.log(searchValue.value)
}
</script>

<template>
  <div>
    <el-input
      v-model="searchValue"
      class="search-box"
      style="min-width: 150px"
      placeholder="搜索语林"
      @focus="$emit('update:searchOnFocus', true)"
      @blur="$emit('update:searchOnFocus', false)"
      @keyup.enter="searchTo"
    >
      <template #append>
        <div class="search-icon" @click="searchTo">
          <i class="i-fe:search f-c-c font-size-18" />
        </div>
      </template>
    </el-input>
  </div>
</template>

<style scoped>
/* 输入框获取焦点时，修改 append 容器背景色和图标颜色 搜索按钮后缀容器颜色*/
.search-box:focus-within :deep(.el-input-group__append) {
  background-color: rgba(var(--el-color-primary-rgb), 0.1); /* 浅蓝色背景 */
  cursor: pointer;
}
/* 输入框获取焦点时，修改图标颜色 */
.search-box:focus-within .search-icon .i-fe\:search {
  color: var(--el-color-primary); /* Element Plus 主色，可自定义 */
}
</style>
